<template>
  <div class="calendar-room" v-loading.fullscreen.lock="loading">
    <v-contextmenu ref="contextmenu">
      <v-contextmenu-item @click="changeDirty" data-auth="store_room_cleanordirty">转为{{dirtyName}}房</v-contextmenu-item>
      <v-contextmenu-item @click="changeLockShow" data-auth="store_room_lock">{{lockName}}</v-contextmenu-item>
    </v-contextmenu>
    <div class="calendar-title">
      <span class="calendar-title-1"></span>已入住
      <span class="calendar-title-2"></span>已预订
      <span class="calendar-title-3"></span>已退房
      <span class="calendar-title-4"></span>已关闭
      <span class="calendar-title-5"></span>脏房
      <a @click="GetHotelOrderByPage('assign','待分房')">待分房{{orderCount.assign}}</a>
      <a @click="GetHotelOrderByPage('checkin','今日预到')">今日预到{{orderCount.checkin}}</a>
      <a @click="GetHotelOrderByPage('checkout','今日预离')">今日预离{{orderCount.checkout}}</a>
      <a @click="GetHotelOrderByPage('in','当前在店')">当前在店{{orderCount.in}}</a>
      <el-autocomplete
        class="ml10"
        popper-class="my-autocomplete"
        v-model="searchKey"
        :fetch-suggestions="querySearch"
        placeholder="姓名/电话/订单号/房间号"
        @select="handleSelect">
        <template slot-scope="props">
          <div class="search-orderDiv">
            <span>{{ props.item.ContactName }}</span>
            <span v-if="props.item.FromChannelName">({{ props.item.FromChannelName }}{{props.item.TravelAgencyName}})</span>
          </div>
          <div class="search-orderDiv">
            <span>{{ props.item.OrderSerialid }}</span>
            <span v-if="props.item.RoomNo">({{ props.item.RoomNo }})</span>
          </div>
          <div class="search-orderDiv">
            <span v-if="props.item.ContactPhone">电话：{{ props.item.ContactPhone }}</span>
          </div>
          <div class="search-orderDiv br1">
            <span>{{ props.item.CheckInDate }}入住</span>
            <span v-if="props.item.HotelOrderStatusName">({{ props.item.HotelOrderStatusName }})</span>
          </div>
        </template>
      </el-autocomplete>
    </div>
    <div class="calendar-picker">
      <el-date-picker
        v-model="nowDate"
        value-format="yyyy-MM-dd"
        align="right"
        type="date"
        placeholder="选择日期"
        :learable="false"
        :editable="false"
        :clearable="false"
        :picker-options="pickerOptions"
        @change="changeDate"
      >
      </el-date-picker>
      <div class="picker-select">
        <span v-popover:popover>筛选房型<i class="el-icon-arrow-down el-icon--right"></i></span>
        <el-popover
          ref="popover"
          placement="bottom"
          width="180"
          v-model="checkRoomShow"
          trigger="click">
          <p>
            <el-autocomplete
              v-model="roomNo"
              :fetch-suggestions="queryRoom"
              placeholder="房间号"
              @select="selectRoomNo">
              <template slot-scope="props">
                <div>{{ props.item.roomName }}</div>
              </template>
            </el-autocomplete>
          </p>
          <p class="mr10"><el-checkbox v-model="checkallRoom" @change="checkAllRoom">全部房型</el-checkbox></p>
          <p class="mr10" v-for="(m,index) in roomNumData" :key="m.roomId">
            <el-checkbox v-if="!!roomCheckData" @change="getRoomType(m.roomId)" v-model="roomCheckData[index].ischeck">{{m.roomName}}</el-checkbox>
          </p>
          <div class="txl mr0">
            <el-button size="mini" @click="initRoom(true)">查询</el-button>
          </div>
        </el-popover>
      </div>
    </div>
    <div class="calendar-header">
      <table class="calendar-header-table">
        <tbody>
        <tr>
          <th class="calendar-header-item" v-for="(i,index) in 30">
            <div class="calendar-header-date"
            :class="{'today':isToday(index)}">
              <div class="calendar-header-day">
                <template v-if="isToday(index)">{{$format('MM-dd',getFormatDay(index))}}今天</template>
                <template v-else>{{$format('MM-dd',getFormatDay(index))}}</template>
              </div>
              <div class="calendar-header-desc">
                <span class="weekend" v-if="holidayData.some((val)=>{return val.Date===$format('MM-dd',getFormatDay(index))})">
                  <template v-for="m in holidayData" v-if="m.Date===$format('MM-dd',getFormatDay(index))">
                    {{m.Holiday}}
                  </template>
                </span>
                <span>{{weekday[getFormatDay(index).getDay()]}}</span>
              </div>
            </div>
            <div class="calendar-header-left" v-if="!!ventorySimple.length">剩{{ventorySimple[index].LeftCount}}间</div>
          </th>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="calendar-body" :class="{'showCard':this.selectedRoom.length>0}">
      <div class="calendar-leftHeader">
        <div class="calendar-category" v-for="m in roomNumData" v-if="showroomRowFormatData.some((val)=>{return m.roomId===val.roomId})">
          <div class="calendar-category-name">
            <span class="calendar-category-name-text">{{m.roomName}}</span>
          </div>
          <div class="calendar-category-list" v-contextmenu:contextmenu>
            <div v-for="(n,index) in showroomRowFormatData" @contextmenu="contentClick(n)" class="calendar-category-room" v-if="m.roomId===n.roomId">
              <span v-if="n.IsLock">{{n.roomName}}<br><span v-if="n.LockMes" :title="n.LockMes" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 65px;display: block;">{{n.LockMes}}</span></span>
              <span v-else>{{n.roomName}}</span>
              <span v-if="n.IsDirty" class="spanIsDirty"></span>
            </div>
          </div>
        </div>
      </div>
      <div v-scroll="onscroll" class="calendar-status-list">
        <table class="calendar-status-table">
          <tbody>
              <tr class="calendar-status-row" v-for="(m,mindex) in showroomRowFormatData" :ref="m.roomName">
                <td class="calendar-status" v-for="(i,index) in m.roomList" :class="{'selected':i.selected}" :data-price="i.Price"
                 :ref="m.roomId+i.roomDate+m.roomName" @drop="dropOrder($event,m,i)" @dragover="allowDrop($event)" @dragenter="allowDrop($event)" @dragleave="dropLeave($event)">
                  <template v-if="m.openRoom&&!m.IsLock">
                    <span class="calendar-status-interPrice" v-if="!!i.PolicyId">￥{{i.Price}}</span>
                    <div class="calendar-status-inner" v-if="!!i.PolicyId" :class="{'selected':i.selected}" @click="toggleClass(m,i.roomDate,index,i.Price,i)">
                      <div class="calendar-status-info">
                        <div class="calendar-status-date">{{i.roomDate.slice(5)}}</div>
                        <div class="calendar-status-price">￥{{i.Price}}</div>
                        <div class="mt8">{{m.RoomCategoryShortName}}</div>
                        <div class="calendar-status-name">{{m.roomName}}</div>
                      </div>
                    </div>
                    <div class="calendar-status-interPrice" v-else>
                      暂无价格
                    </div>
                  </template>
                  <div v-if="!m.openRoom&&!m.IsLock" class="txc">
                    {{i.roomNum}}间
                  </div>
                  <div v-if="m.IsLock" class="txc">
                    已锁房
                  </div>
                </td>
              </tr>
          </tbody>
        </table>
        <draggable v-model="orderData" @start="dragStart" @end="orderMoveEnd" :move="()=>{return false}">
            <div v-for="m in orderData" :draggable="m.type===1" @dragstart="dragOrder($event,m)" :ref="'order'+m.roomNum+m.date" class="orderDiv" :class="{'orderInDiv':m.type===1||m.type===2,'orderOutDiv':m.type===3||m.type===5}" @click="showOrder(m.orderSerialid,m.type)">
                <div class="orderdivTitle">
                   {{m.personName}}
                </div>
                <div class="orderName">
                  {{m.name}}
                </div>
                <div class="orderType">
                  <span v-if="m.NeedPayAmount>0" class="colorred">欠</span>
                </div>
            </div>
        </draggable>
      </div>
    </div>
    <div class="shopcart" v-if="this.selectedRoom.length>0">
      <p class="shopcart-count">已选择{{this.showCardList.length}}个房间</p>
       <div class="shopcart-rooms">
         <div class="shopcart-room" v-for="m in showCardList">{{m.roomNum}}-{{m.roomName}}</div>
       </div>
       <div class="shopcart-action">
         <el-button type="warning" plain v-if="showBtn(0)" @click="roomBook" data-auth="store_roomstatus_order_reserve">预订</el-button>
         <el-button type="success" plain v-if="showBtn(1)" @click="roomIn" data-auth="store_room_order_directplace">直接入住</el-button>
         <el-button type="danger" plain v-if="showBtn(-1)" @click="roomFill" data-auth="store_roomstatus_order_bulu">补录</el-button>
      </div>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="roomShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1360px"
      center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
        <div class="user-title">客户信息</div>
        <div class="user-info">
          <el-form-item label="联系人：" size="mini" prop="ContactName">
            <el-autocomplete
              v-model="ruleForm.ContactName"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              @select="val=>{ruleForm.ContactPhone=val.Phone}"
            >
            <template slot-scope="props">
              <div class="search-orderDiv">
                <span>{{ props.item.value }}</span>
                <span>{{ props.item.Phone }}</span>
              </div>
            </template>
          </el-autocomplete>
          </el-form-item>
          <el-form-item label="手机号：" size="mini" prop="ContactPhone">
            <el-input :maxlength="11" v-model="ruleForm.ContactPhone"></el-input>
          </el-form-item>
          <el-form-item label="来源渠道：" size="mini" label-width="95px" prop="FromChannel">
            <el-select v-model="ruleForm.FromChannel" placeholder="请选择" @change="getFromChannel1(ruleForm.FromChannel)">
              <el-option
                v-for="m in ChannelList"
                :label="m.Name"
                :value="parseInt(m.Code)"
                :key="m.Code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="渠道商：" size="mini" label-width="80px" prop="TravelAgency" v-if="ruleForm.FromChannel==7||ruleForm.FromChannel==8">
            <el-select v-model="ruleForm.TravelAgency" placeholder="请选择" filterable>
              <el-option
                v-for="m in ChannelChildList"
                :label="m.Name"
                :value="parseInt(m.Code)"
                :key="m.Code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售员：" size="mini" label-width="80px" prop="SalesmanId">
              <el-select v-model="ruleForm.SalesmanId" placeholder="请选择" filterable>
                <el-option
                  label="无"
                  :value="0">
                </el-option>
                <el-option
                  v-for="m in SalesmanList"
                  :label="m.JobNo+'-'+m.Name"
                  :value="m.Id"
                  :key="m.Id">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="支付类型：" size="mini" label-width="95px" prop="PaymentMode">
              <el-select v-model="ruleForm.PaymentMode" placeholder="请选择">
                <el-option :label="'全额预付'" :value="1"></el-option>
								<el-option :label="'部分预付'" :value="2"></el-option>
								<el-option :label="'到店现付'" :value="3"></el-option>
								<el-option :label="'已担保（未支付）'" :value="4"></el-option>
              </el-select>
          </el-form-item>
        </div>
        <div class="user-title">
          房间信息 <span class="el-icon-circle-plus-outline"
          @click="addRoom">
          添加房间</span>
        </div>
        <div class="room-form">
          <div class="room-row" v-for="(m,index) in dialogData">
            <el-form-item label="房间：" label-width="60px" prop="roomId">
              <el-select v-model="m.roomId" size="mini" placeholder="请选择" @change="val=>{getMroomData(m,val,index)}">
                <el-option
                  v-for="n in roomNumData"
                  :key="n.roomId"
                  :label="n.roomName"
                  :value="n.roomId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="房号：" label-width="60px" size="mini" prop="roomNum" class="w150">
              <el-select v-model="m.roomNum" placeholder="请选择" @change="val=>{getRoomId(m,val)}" :disabled="!m.roomData||!m.roomData.length" filterable>
                <el-option
                  :label="'未排房'"
                  :value="''">
                </el-option>
                <el-option
                  v-for="n in m.roomData"
                  :key="n.RoomId"
                  :label="n.RoomName"
                  :value="n.RoomName">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="到达" size="mini" label-width="50px" prop="startDate" class="date-form sdate">
              <el-date-picker
                v-model="m.startDate"
                type="datetime"
                placeholder="到达时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                :learable="false"
                :editable="false"
                :clearable="false"
                :picker-options="startOptions"
                 @change="getendDate(m,index)"
                >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="离开" size="mini" label-width="50px" prop="endDate" class="date-form edate">
              <el-date-picker
                v-model="m.endDate"
                type="datetime"
                placeholder="离开时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                :learable="false"
                :editable="false"
                :clearable="false"
                :picker-options="endOptions"
                 @change="getMroomPrcie(m)">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="晚数：" label-width="80px" prop="Days" style="width:250px">
              <el-input-number v-model="m.Days" :min="1" @change="val=>{changeDays(val,m)}"></el-input-number>
            </el-form-item>
            <el-form-item label="房费：" label-width="60px" size="mini" prop="AllAmount">
              <el-input v-model="m.AllAmount" @change="getAllAmount"></el-input>
            </el-form-item>
            <div>
               <span class="el-icon-remove-outline" v-if="dialogData.length>1&&m.Status!==1" @click="deleteRoomPro('dialogData',index)">删除房间</span>
            </div>
          </div>
        </div>
        <div class="user-title">消费信息 <span class="el-icon-circle-plus-outline"
          @click="ProductList.push({ProductType:'',ProductId:'',UnitPrice:'',Quantity:'',AllAmount:'',Unit:'',SellingPriceAmount:0,ProductNameList:[]})">添加商品</span></div>
        <div class="price-form">
          <div class="room-row" v-for="(m,index) in ProductList">
            <el-form-item label="类别：" label-width="60px" size="mini" prop="ProductType">
              <el-select v-model="m.ProductType" placeholder="请选择" @change="GetSingleProductByType(m)">
                <el-option label="休闲娱乐" :value="6701"></el-option>
                <el-option label="房间消费" :value="6702"></el-option>
                <el-option label="土特产" :value="6703"></el-option>
                <el-option label="旅游交通" :value="6704"></el-option>
                <el-option label="餐饮" :value="6705"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="名称：" label-width="60px" size="mini" prop="ProductId">
              <el-select v-model="m.ProductId" placeholder="请选择" @change="getUnitPrice(m)">
                <el-option
                  v-for="n in m.ProductNameList"
                  :key="n.Id"
                  :label="n.Name"
                  :value="n.Id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单价：" label-width="60px" size="mini" prop="UnitPrice">
              <el-input v-model="m.UnitPrice" type="number" @change="getUnitPrice(m)"></el-input>
            </el-form-item>
            <el-form-item label="数量：" label-width="60px" size="mini" prop="Quantity" class="num-input">
              <el-input-number v-model="m.Quantity" :min="1" @change="getUnitPrice(m)" label="数量"></el-input-number>
            </el-form-item>
            <el-form-item label="小计：" label-width="60px" size="mini" prop="AllAmount">
              <el-input v-model="m.AllAmount" @change="getAllAmount"></el-input>
            </el-form-item>
            <div>
               <span class="el-icon-remove-outline" @click="deleteRoomPro('ProductList',index)">删除商品</span>
            </div>
          </div>
        </div>
        <template v-if="dialogTitle==='预定'||dialogTitle==='直接入住'||dialogTitle==='补录'">
        <div style="padding-right:20px;margin: 10px;">
          <el-dropdown trigger="hover" placement="top" @command="addPriceInfo">
            <span class="el-dropdown-link" style="cursor:pointer;color: #399be6;margin-left:10px;">添加款项</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{type:1,name:'收款'}">收款</el-dropdown-item>
              <el-dropdown-item :command="{type:2,name:'商品'}">商品</el-dropdown-item>
              <el-dropdown-item :command="{type:3,name:'收押金'}">收押金</el-dropdown-item>
              <el-dropdown-item :command="{type:4,name:'退款'}">退款</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-table
          :data="tableData"
          style="width: 95%;margin:5px auto 15px;max-height: 200px;overflow: auto;"
          v-show="true">
          <el-table-column
            prop="CashierItem"
            label="项目">
            <template slot-scope="scope">
              {{CashierItem[scope.row.CashierItem]}}
            </template>
          </el-table-column>
          </el-table-column>
          <el-table-column
            prop="Amount"
            label="收款">
          </el-table-column>
          <el-table-column
            label="支付方式">
            <template slot-scope="scope">
              {{getCash(scope.row.CashierChannel)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="Remark"
            label="财务备注">
            <template slot-scope="scope">
              {{scope.row.Remark||''}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            class="delete-td">
            <template slot-scope="scope">
              <span @click="tableData.splice(scope.index,1)" style="color:rgb(57, 155, 230);cursor:pointer;">删除</span>
            </template>
          </el-table-column>
        </el-table>
        </template>
        <div class="user-title remark-div">
          <el-form-item label="备注：" label-width="60px" prop="Remark">
            <el-input type="textarea" v-model="ruleForm.Remark"></el-input>
          </el-form-item>
        </div>
        <div class="price-div">
          <span>订单总金额：{{ruleForm.AllAmount}} 元</span>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitOrder">{{OrderAction===2?'直接入住':OrderAction===0?'确认修改':'预定'}}</el-button>
        <el-button @click="roomShow = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="'订单详情'"
      :visible.sync="orderInfo"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="850px"
      center>
      <div class="orderinfo-div">
        <div class="orderinfo-title">基本信息
          <a @click="SendSMS" href="javascript:void(0);" class="sendsms-span">发送短信</a></div>
        <span>联系人： {{orderInfoData.ContactName}} </span>
        <span :title="orderInfoData.PhoneAttribution">
          联系电话： {{orderInfoData.ContactPhone}}({{orderInfoData.PhoneAttribution}})
        </span>
        <span>销售员： {{getSaleMan(orderInfoData.SalesmanId)}}</span>
        <span>支付类型： {{orderInfoData.PaymentModeName}}</span>
        <span>渠道来源： {{orderInfoData.FromChannelName}}</span>
        <span v-if="!!orderInfoData.TravelAgencyName">渠道商： {{orderInfoData.TravelAgencyName}}</span>
      </div>
      <div class="orderinfo-div">
        <div class="orderinfo-title">
          预定信息<span style="font-size:14px">（订单号：{{orderInfoData.OrderSerialid}}）</span>
        </div>
        <template  v-for="m in orderInfoData.HotelOrders">
          <span>入住：{{m.CheckInDate.split('T')[0]}}</span>
          <span>离店：{{m.CheckOutDate.split('T')[0]}}</span>
          <span>共{{getAlldate(m.CheckInDate,m.CheckOutDate).length-1}}晚</span>
          <span>房型：{{m.RoomCategoryName}}<i class="type" :class="{'room-book':m.Status===0,'room-in':m.Status===1}">{{orderTypeList[m.Status]}}</i></span>
          <span>房间号：{{m.RoomNo}}<i class="type room-book" v-if="m.IsDirty">脏</i></span>
          <span>价格：<b>{{m.AllAmount}}元</b></span>
          <p v-for="n in m.Roomers">
            <span>入住人姓名： {{n.Name}}</span>
            <span>入住人{{cerList[n.CertType]}}：{{n.CertNo}}</span>
          </p>
        </template>
        <p v-for="m in orderInfoData.SingleProductOrders">
          <span>商品：{{m.ProductName}}（{{m.UnitPrice}}/{{m.Unit}}）</span>
          <span>数量：{{m.Quantity}}{{m.Unit}}</span>
          <span>价格：<b>{{m.AllAmount}}元</b></span>
        </p>
      </div>
      <div class="orderinfo-div">
        <div class="orderinfo-title">
          收银信息
        </div>
        <span>订单总额: <b>¥{{orderInfoData.AllAmount}}</b></span>
        <span style="width: 40%;">已收款：<b>¥{{orderInfoData.PaidAmount}}</b><template>（含押金：{{orderInfoData.DepositPayAmount?orderInfoData.DepositPayAmount:0}}）</template></span>
        <span style="width: 25%;">需补交：<b>¥{{orderInfoData.RestAmount}}</b></span>
        <span @click="getpriceData" style="cursor:pointer;color: #399be6;margin-left:10px;float: right;text-align:right">财务明细</span>
        <div style="padding:10px 20px 0px 0px;float: left;">
          <el-dropdown trigger="hover" placement="top" @command="addPriceInfo">
            <span class="el-dropdown-link">添加款项</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{type:1,name:'收款'}">收款</el-dropdown-item>
              <el-dropdown-item :command="{type:2,name:'商品'}">商品</el-dropdown-item>
              <el-dropdown-item :command="{type:3,name:'收押金'}">收押金</el-dropdown-item>
              <el-dropdown-item :command="{type:4,name:'退款'}">退款</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-table
          :data="tableData"
          style="width: 95%;margin:5px auto;max-height: 200px;overflow: auto;"
          v-show="tableShow">
          <el-table-column
            prop="CashierItem"
            label="项目">
            <template slot-scope="scope">
              {{CashierItem[scope.row.CashierItem]}}
            </template>
          </el-table-column>
          </el-table-column>
          <el-table-column
            prop="Amount"
            label="收款">
          </el-table-column>
          <el-table-column
            label="支付方式"
            prop="CashierChannelDes">
          </el-table-column>
          <el-table-column
            prop="Remark"
            label="财务备注">
          </el-table-column>
          <el-table-column
            prop="OperatorTimeView"
            label="操作时间">
            <template slot-scope="scope">
              <template v-if="!!scope.row.OperatorTimeView">{{scope.row.OperatorTimeView}}</template>
            </template>
          </el-table-column>
          <el-table-column
            prop="OperatorName"
            label="操作人">
          </el-table-column>
          <el-table-column
            label="操作"
            class="delete-td">
            <template slot-scope="scope">
              <span @click="deletePriceInfo(scope.row)" v-if="scope.row.IsValid" style="color:rgb(57, 155, 230);cursor:pointer;">删除</span>
              <span v-else style="color:red">已删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="orderinfo-div">
        <div class="orderinfo-title">
          备注
        </div>
        <p style="padding:0 15px;">{{orderInfoData.Remark}}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <template v-if="orderInfoData.OrderStatus!==5">
          <el-button type="warning" size="mini" round @click="editOrder" data-auth="store_order_modify">修改订单</el-button>
          <el-button type="warning" size="mini" round @click="roominShowBtn" data-auth="store_order_checkin" v-if="orderInfoData.OrderStatus!==1">办理入住</el-button>
          <el-button type="warning" size="mini" round @click="printOrder(orderInfoData.OrderSerialid)" data-auth="store_order_print" v-if="orderInfoData.OrderStatus===1||orderInfoData.OrderStatus===2">打印入住凭证</el-button>
          <el-button type="warning" size="mini" round @click="roomoutShowBtn" data-auth="store_order_checkout" v-if="orderInfoData.OrderStatus!==0">办理退房</el-button>
          <el-button type="warning" size="mini" round @click="deleteOrderShowBtn" data-auth="store_order_cancle" v-if="orderInfoData.OrderStatus===0">取消订单</el-button>
        </template>
        <el-button type="warning" size="mini" round data-auth="store_order_log" @click.stop="() => {formData.orderSerialid=orderInfoData.OrderSerialid;$refs.tim.toggleDiolag()}">订单日志</el-button>
      </span>
    </el-dialog>
    <time-line :showInfo="showInfo" :formData="formData" :title="'订单日志'" ref="tim"></time-line>

    <el-dialog
      :title="'办理退房'"
      :visible.sync="roomoutShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="850px"
      center>
      <div class="orderinfo-div" v-for="m in orderInfoData.HotelOrders" v-if="m.Status===1">
        <span>
           <el-checkbox @change="getroomOutData(m)" v-model="m.IsCheckOut">{{m.RoomNo}}（{{m.RoomCategoryName}}）</el-checkbox>
        </span>
        <span>{{orderInfoData.ContactName}} </span>
        <span>入离：{{m.CheckInDate.split('T')[0]}}至{{m.CheckOutDate.split('T')[0]}}共{{getAlldate(m.CheckInDate,m.CheckOutDate).length-1}}晚<b>￥{{m.AllAmount}}</b></span>
      </div>
      <div class="orderinfo-div" v-for="m in orderInfoData.SingleProductOrders">
        <span>{{m.ProductName}}（{{m.UnitPrice}}/{{m.Unit}}）</span>
        <span>{{m.Quantity}}{{m.Unit}}共<b>￥{{m.AllAmount}}</b></span>
      </div>
      <div class="orderinfo-div">
        <span>订单总额: <b>¥{{orderInfoData.AllAmount}}</b></span>
        <span style="width: 40%;">已收款：<b>¥{{orderInfoData.PaidAmount}}</b><template>（含押金：{{orderInfoData.DepositPayAmount?orderInfoData.DepositPayAmount:0}}）</template></span>
        <span style="width: 25%;">需补交：<b>¥{{orderInfoData.RestAmount}}</b></span>
        <a @click="getpriceData" style="cursor:pointer;color: #399be6;margin-left:10px;">财务明细</a>
        <el-table
          :data="tableData"
          style="width: 95%;margin:5px auto;max-height: 200px;overflow: auto;"
          v-show="tableShow">
          <el-table-column
            prop="CashierItem"
            label="项目">
            <template slot-scope="scope">
              {{CashierItem[scope.row.CashierItem]}}
            </template>
          </el-table-column>
          </el-table-column>
          <el-table-column
            prop="Amount"
            label="收款">
          </el-table-column>
          <el-table-column
            label="支付方式"
            prop="CashierChannelDes">
          </el-table-column>
          <el-table-column
            prop="Remark"
            label="财务备注">
          </el-table-column>
          <el-table-column
            prop="OperatorTimeView"
            label="操作时间">
            <template slot-scope="scope">
              <template v-if="!!scope.row.OperatorTimeView">{{scope.row.OperatorTimeView}}</template>
            </template>
          </el-table-column>
          <el-table-column
            prop="OperatorName"
            label="操作人">
          </el-table-column>
          <el-table-column
            label="操作"
            class="delete-td">
            <template slot-scope="scope">
              <span @click="deletePriceInfo(scope.row)" v-if="scope.row.IsValid" style="color:rgb(57, 155, 230);cursor:pointer;">删除</span>
              <span v-else style="color:red">已删除</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding:0 20px 10px 0;">
          <el-dropdown trigger="hover" placement="top" @command="addPriceInfo">
            <span class="el-dropdown-link">添加款项</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{type:1,name:'收款'}">收款</el-dropdown-item>
              <el-dropdown-item :command="{type:2,name:'商品'}">商品</el-dropdown-item>
              <el-dropdown-item :command="{type:3,name:'收押金'}">收押金</el-dropdown-item>
              <el-dropdown-item :command="{type:4,name:'退款'}">退款</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="orderinfo-div">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="roomoutData.Remark" placeholder="订单备注(最多400字)"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="orderInfoData.RestAmount!=0" type="warning" size="mini" round @click="roomoutBefore" :disabled="!roomoutData.HotelOrderIds.length">结账退房</el-button>
        <el-button v-else type="warning" size="mini" round @click="roomoutTrue" :disabled="!roomoutData.HotelOrderIds.length">结账退房</el-button>
        <el-button type="warning" size="mini" round @click="roomoutShow=false">取消</el-button>
        <el-checkbox v-model="isPrint" style="color:rgb(57, 155, 230);cursor:pointer;margin-left:10px;">打印结账单</el-checkbox>
      </span>
    </el-dialog>

    <roomout-price @roomoutBeforeDown="roomoutTrue" :showInfo="roomoutpriceShow" :priceForm="roomoutpriceData" :title="roomoutpriceTitle" :CashierChannelList="CashierChannelList" ref="roomoutprice"></roomout-price>

    <el-dialog
      :title="'办理入住'"
      :visible.sync="roominShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="850px"
      center>
        <div class="orderinfo-div" v-for="m in orderInfoData.HotelOrders" v-if="m.Status===0&&m.CheckInDate.split('T')[0]<=$format('yyyy-MM-dd',new Date())&&!!m.RoomNo">
           <div v-for="(n,nindex) in m.Roomers" style="width:100%;padding:5px">
             <span>入住人姓名：<el-input style="width:80px" v-model="n.Name"></el-input></span>
             <span>证件类型：
               <el-select class="s-select" style="width:100px" v-model="n.CertType" placeholder="请选择" @change="n.CertNo=''">
                 <el-option label="身份证" :value="1"></el-option>
                 <el-option label="护照" :value="2"></el-option>
                 <el-option label="军官证" :value="3"></el-option>
                 <el-option label="通行证" :value="4"></el-option>
                 <el-option label="其他" :value="5"></el-option>
               </el-select>
             </span>
              <span>入住人证件号：<el-input style="width:150px" v-model="n.CertNo"></el-input></span>
             <span class="el-icon-remove-outline" @click="m.Roomers.splice(nindex,1)">删除</span>
            </div>
            <span style="margin-bottom:15px;" class="el-icon-circle-plus-outline"  @click="m.Roomers.push({Name:'',CertType:1,CertNo:''})">添加入住人</span>
            <span>{{orderInfoData.ContactName}} </span>
            <span>入离：{{m.CheckInDate.split('T')[0]}}至{{m.CheckOutDate.split('T')[0]}}共{{getAlldate(m.CheckInDate,m.CheckOutDate).length-1}}晚<b>￥{{m.AllAmount}}</b></span>
            <el-checkbox @change="getroomInData(m.Id)" v-model="m.IsCheckIn" style="margin-left:10px;">
              <span>房间：{{m.RoomNo}}（{{m.RoomCategoryName}}）</span>
            </el-checkbox>
        </div>
        <div class="orderinfo-div" v-for="m in orderInfoData.SingleProductOrders">
          <span>{{m.ProductName}}（{{m.UnitPrice}}/{{m.Unit}}）</span>
          <span>{{m.Quantity}}{{m.Unit}}共<b>￥{{m.AllAmount}}</b></span>
        </div>
        <div class="orderinfo-div">
          <span>订单总额: <b>¥{{orderInfoData.AllAmount}}</b></span>
          <span style="width: 40%;">已收款：<b>¥{{orderInfoData.PaidAmount}}</b><template>（含押金：{{orderInfoData.DepositPayAmount?orderInfoData.DepositPayAmount:0}}）</template></span>
          <span style="width: 25%;">需补交：<b>¥{{orderInfoData.RestAmount}}</b></span>
          <a @click="getpriceData" style="cursor:pointer;color: #399be6;margin-left:10px;float:right;">财务明细</a>
          <el-table
            :data="tableData"
            style="width: 95%;margin:5px auto;max-height: 200px;overflow: auto;"
            v-show="tableShow">
            <el-table-column
              prop="CashierItem"
              label="项目">
              <template slot-scope="scope">
                {{CashierItem[scope.row.CashierItem]}}
              </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
              prop="Amount"
              label="收款">
            </el-table-column>
            <el-table-column
              label="支付方式"
              prop="CashierChannelDes">
            </el-table-column>
            <el-table-column
              prop="Remark"
              label="财务备注">
            </el-table-column>
            <el-table-column
              prop="OperatorTimeView"
              label="操作时间">
              <template slot-scope="scope">
                <template v-if="!!scope.row.OperatorTimeView">{{scope.row.OperatorTimeView}}</template>
              </template>
            </el-table-column>
            <el-table-column
              prop="OperatorName"
              label="操作人">
            </el-table-column>
            <el-table-column
              label="操作"
              class="delete-td">
              <template slot-scope="scope">
                <span @click="deletePriceInfo(scope.row)" v-if="scope.row.IsValid" style="color:rgb(57, 155, 230);cursor:pointer;">删除</span>
                <span v-else style="color:red">已删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding:0 20px 10px 0;">
            <el-dropdown trigger="hover" placement="top" @command="addPriceInfo">
              <span class="el-dropdown-link">添加款项</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{type:1,name:'收款'}">收款</el-dropdown-item>
                <el-dropdown-item :command="{type:2,name:'商品'}">商品</el-dropdown-item>
                <el-dropdown-item :command="{type:3,name:'收押金'}">收押金</el-dropdown-item>
                <el-dropdown-item :command="{type:4,name:'退款'}">退款</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="orderinfo-div">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="orderInfoData.Remark" placeholder="订单备注(最多400字)"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="warning" size="mini" round @click="roominTrue" :disabled="!roominData.length">确认入住</el-button>
          <el-button type="warning" size="mini" round @click="roominShow=false">取消</el-button>
          <el-checkbox v-model="isPrint" style="color:rgb(57, 155, 230);cursor:pointer;margin-left:10px;">打印入住确认单</el-checkbox>
        </span>
    </el-dialog>

    <el-dialog
      :title="priceTitle"
      :visible.sync="priceShow"
      width="350px"
      center>
      <el-form :model="priceForm" :rules="pricerules" ref="priceForm" label-width="100px">
        <el-form-item label="金额：" prop="Amount">
          <el-input v-model="priceForm.Amount" ref="priceFormAmount"></el-input>
        </el-form-item>
        <el-form-item label="支付方式：" prop="CashierChannel">
          <el-select v-model="priceForm.CashierChannel" placeholder="请选择">
            <el-option
              v-for="m in CashierChannelList"
              :label="m.Name"
              :value="parseInt(m.Code)"
              :key="m.Code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="财务备注：" prop="Remark">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="priceForm.Remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!roomShow" type="primary" @click="addPriceBtn('priceForm')">保存</el-button>
        <el-button v-else type="primary" @click="addPriceRoomIn('priceForm')">保存</el-button>
        <el-button @click="priceShow = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="'取消订单'"
      :visible.sync="deleteOrderShow"
      width="350px"
      class="delete-dialog"
      center>
      <div class="">
        <p>该订单已收款 <span style="color:red">¥{{orderInfoData.PaidAmount}}</span> ，是否确认取消该订单？</p>
        <p>财务是否需要处理:
          <el-radio v-model="radio" :label="0">是</el-radio>
          <el-radio v-model="radio" :label="1">否</el-radio>
        </p>
      </div>
      <div class="">
        <span class="color:red">*</span>请选择取消订单的原因：
        <p>
          <el-radio v-model="CancelReason" label="客人预订未到">客人预订未到</el-radio>
          <el-radio v-model="CancelReason" label="客人取消预约">客人取消预约</el-radio>
          <el-radio v-model="CancelReason" label="满房拒单">满房拒单</el-radio>
          <el-radio v-model="CancelReason" label="调整房态">调整房态</el-radio>
          <el-radio v-model="CancelReason" label="重复订单">重复订单</el-radio>
          <el-radio v-model="CancelReason" label="其他">其他</el-radio>
        </p>
      </div>
      <el-form :model="priceForm" :rules="pricerules" ref="priceForm" label-width="100px" v-if="radio===0">
        <el-form-item label="退款金额：" prop="Amount">
          <el-input v-model="priceForm.Amount"></el-input>
        </el-form-item>
        <el-form-item label="支付方式：" prop="CashierChannel">
          <el-select v-model="priceForm.CashierChannel" placeholder="请选择">
            <el-option
              v-for="m in CashierChannelList"
              :label="m.Name"
              :value="parseInt(m.Code)"
              :key="m.Code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="财务备注：" prop="Remark">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="priceForm.Remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteOrder('priceForm')">保存</el-button>
        <el-button @click="deleteOrderShow = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="HotelOrderTitle"
      :visible.sync="HotelOrderShow"
      width="850px"
      class="delete-dialog"
      center>
      <el-table
        :data="HotelOrderData"
        @row-click="(val)=>{showOrder(val.OrderSerialid)}"
        style="width: 100%">
        <el-table-column
          label="渠道类型"
          prop="FromChannelName">
        </el-table-column>
        <el-table-column
          label="渠道商">
          <template slot-scope="scope">
              <span>{{scope.row.TravelAgencyName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="房间信息">
          <template slot-scope="scope">
            <span>{{scope.row.RoomCategoryName}}({{scope.row.RoomNo}})</span>
          </template>
        </el-table-column>
        <el-table-column
          label="客人入住信息"
          width="220px">
          <template slot-scope="scope">
            <div>
              {{scope.row.ContactName}}
            </div>
            <span>{{scope.row.CheckInDate}}--{{scope.row.CheckOutDate}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="金额"
          prop="HotelAllAmount">
          <template slot-scope="scope">
            <span style="color:red">￥{{scope.row.HotelAllAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
        width="150px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="!scope.row.RoomNo"
              @click.stop="setRoom(scope.row.OrderSerialid)">分房</el-button>
            <el-button
              size="mini"
              @click.stop="showOrder(scope.row.OrderSerialid)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>

    <el-dialog
      :title="'分房'"
      :visible.sync="setRoomShow"
      width="550px"
      class="setRoom-dialog"
      center>
        <div class="setroom-div">
          <span>订单号：{{orderSerialid}}</span>
        </div>
        <div class="setroom-div" v-for="m in setRoomData">
          <div class="setroom-title">
            <span>{{m.RoomCategoryName}}</span>
            <span>{{m.Price}}</span>
            <span>{{m.RoomCount}}间</span>
          </div>
          <div class="setroom-title">
            <span>房态：</span>
            <span>
              <el-radio-group v-model="m.roomType" @change="setcheck(m.roomType)">
                <el-radio :label="0">全部</el-radio>
                <el-radio :label="1">脏房</el-radio>
                <el-radio :label="2">净房</el-radio>
              </el-radio-group>
          </span>
          </div>
          <div class="setroom-room">
            <span>房号：</span>
            <span>
              <el-checkbox-group v-model="m.checkList" @change="getcheckList(m.checkList,m.RoomCount)">
                <template v-for="n in m.RoomList">
                  <el-checkbox v-if="n.IsDirty" v-show="m.roomType===0||m.roomType===1" :label="n.RoomId" :key="n.RoomId">{{n.RoomNo}}</el-checkbox>
                  <el-checkbox v-if="!n.IsDirty" v-show="m.roomType===0||m.roomType===2" :label="n.RoomId" :key="n.RoomId">{{n.RoomNo}}</el-checkbox>
                </template>
              </el-checkbox-group>
            </span>
          </div>
        </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="setRoomData.every(val=>{return !val.checkList.length})" @click="OrderSetRoom">保存</el-button>
        <el-button @click="setRoomShow = false">取 消</el-button>
      </span>
    </el-dialog>


    <el-dialog
      :title="'锁房'"
      :visible.sync="lockShow"
      width="550px"
      class="delete-dialog"
      center>
      <el-form :model="lockData" :rules="lockrules" ref="lockForm" label-width="140px">
        <el-form-item label="请填写锁房原因：" prop="Remark">
          <el-input v-model="lockData.Remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeLock">保存</el-button>
        <el-button @click="lockShow = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="'发送短信'"
      :visible.sync="SMSShow"
      width="550px"
      class="delete-dialog"
      center>
      <el-form :model="SMSData" :rules="SMSrules" ref="SMSForm" label-width="120px">
        <el-form-item label="手机号码：" prop="Mobiles">
          <el-input v-model="SMSData.Mobiles" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="短信内容：" prop="Content">
          <el-input v-model="SMSData.Content" type="textarea" rows="6"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SendSMTrue">发送</el-button>
        <el-button @click="SMSShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
		components: {
        draggable,
    },
    data() {
      let _this=this;
      return {
        roomNo:'',
        searchKey:'',
        SMSShow:false,
        checkRoomShow:false,
        SMSData:{
          Mobiles:'',
          Content:''
        },
        SMSrules:{
          Mobiles: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
          ],
          Content: [
            { required: true, message: '请输入短信内容', trigger: 'blur' },
          ],
        },
        showInfo:true,
        formData:{
          orderSerialid : ''
        },
        isPrint:false,
        dirtyData:{},
        lockData:{
          Remark:''
        },
        lockrules:{
          Remark: [
            { required: true, message: '请输入锁房原因', trigger: 'blur' },
          ],
        },
        dirtyName:'',
        lockName:'',
        radio:1,
        CancelReason:'',
        CashierItem:{1:'房费',2:'商品',3:'押金',4:'退款'},
        paymentList:{1:'待支付',2:'支付中',3:'已支付'},
        cerList:{1:'身份证',2:'护照',3:'军官证',4:'通行证',5:'其他'},
        orderTypeList:['已预订','已入住','部分入住','已退房','部分退房','已取消'],
        orderCount:{assign:0,checkin:0,checkout:0,in:0},
        setRoomShow:false,
        lockShow:false,
        popover:false,
        roomoutShow:false,
        roominShow:false,
        loading:false,
        tableShow:false,
        priceShow:false,
        roomShow:false,
        orderInfo:false,
        deleteOrderShow:false,
        HotelOrderShow:false,
        checkallRoom:true,
        HotelOrderTitle:'',
        dialogTitle:'',
        priceTitle:'',
        dialogData:[],
        RoomCategoryIds:[],
        SalesmanList:[],
        ChannelList:[],
        ChannelChildList:[],
        CashierChannelList:[],
        orderInfoData:{},
        orderSerialid:'',
        OrderAction:1,
        priceForm:{
          Amount:'',
          Remark:'',
          CashierChannel:'',
        },
        fullHeight: document.documentElement.clientHeight,
        fullLength: parseInt(document.documentElement.clientHeight/70),
        cur:1,
        pricerules:{
          Amount: [
            { required: true, message: '请输入金额', trigger: 'blur' },
          ],
          Remark: [
            { required: false, message: '', trigger: 'blur' },
          ],
          CashierChannel: [
            { required: true, message: '请选择支付方式', trigger: 'change' },
          ],
        },
        roominData:[],
        ventorySimple:[],
        roomoutData:{
          OrderSerialid:'',
          HotelOrderIds:[],
          Remark:''
        },
        ruleForm: {
          ContactName: '',
          ContactPhone: '',
          FromChannel: '',
          SalesmanName: '',
          Remark:'',
          AllAmount:'',
          SellingPriceAmount:'',
          PaymentMode:'',
          SalesmanId:0,
        },
        rules: {
          ContactName: [
            { required: true, message: '请输入联系人', trigger: 'blur' },
          ],
          ContactPhone: [],
          FromChannel: [
            { required: true, message: '请选择来源渠道', trigger: 'change' },
          ],
          TravelAgency: [
            { required: true, message: '请选择渠道商', trigger: 'change' },
          ],
          SalesmanId: [],
          PaymentMode: [
            { required: true,type:'number',message: '请选择支付类型', trigger: 'change' },
          ]
        },
        weekday:["日","一","二","三","四","五","六"],
        pickerOptions: {
          // disabledDate(time) {
          //   return (time.getTime() + 3600 * 1000 * 24 * 3)< Date.now();
          // },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '一周后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        startOptions: {
          disabledDate(time) {
            if(_this.OrderAction===2){
              return Date.now()>(time.getTime()+ 3600 * 1000 * 24 * 1)||Date.now()<time.getTime();
            }else if(_this.OrderAction===0){
              return false;
            }
            else{
              return Date.now()>(time.getTime()+ 3600 * 1000 * 24 * 1);
            }
          }
        },
        endOptions: {
          disabledDate(time) {
            if(_this.OrderAction===2){
              return Date.now()>(time.getTime()+ 3600 * 1000 * 24 * 1);
            }else if(_this.OrderAction===0){
              return false;
            }else{
              return Date.now()>time.getTime();
            }
          }
        },
        holidayData:[
          {Date: "05-01", Type: 0, Holiday: "劳动节"}
        ],
        roomNumData:[
          {roomName:'大床房',isopen:true,roomId:'6',roomData:[]},
        ],
        roomRowData:[
          {roomName:'101',roomId:'6',roomList:[
            {roomIn:0,price:'150'},
          ]}
        ],
        roomRowFormatData:[],
        showroomRowFormatData:[],
        allorderData:[],
        orderData:[
          {room:'001',roomNum:'101',date:this.$format('yyyy-MM-dd',new Date()),name:'客户来源',day:1,type:'订单状态',personName:'客户姓名1'},
        ],
        nowDate: this.$format('yyyy-MM-dd',new Date(new Date().getTime() - 3600 * 1000 * 24 * 3)),
        selectedRoom:[],
        selectedCol:[],
        showCardList:[],
        ProductList:[],
        tableData:[],
        HotelOrderData:[],
        setRoomData:[],
        roomCheckData:'',
        roomoutpriceShow:false,
        roomoutpriceData:{},
        roomoutpriceTitle:''
      }
    },
    computed:{
      holiday(){
        this.holidayData.map((val)=>{
          if(val.Date===this.$format('MM-dd',new Date(new Date(this.nowDate).getTime() + 3600 * 1000 * 24 * index))){
            return val.Holiday
          }
        })
      }
    },
    methods: {
      queryRoom(queryString, cb) {
        let q=queryString?queryString.replace(/\s+/g,""):'';
        if(q){
          let data=[];
          this.showroomRowFormatData.forEach(item=>{
            if(item.roomName.indexOf(q)>=0){
              data.push({roomName:item.roomName})
            }
          })
          cb(data)
        }else{
          cb([])
        }
      },
      selectRoomNo(row){
        let tabT=this.$el.querySelector(".calendar-status-list");
        tabT.scrollTop=this.$refs[row.roomName][0].offsetTop;
        this.checkRoomShow=false;
      },
      querySearch(queryString, cb) {
        let q=queryString?queryString.replace(/\s+/g,""):'';
        if(q){
          let searchData={
            StatusList:[0,1],
            OrgId:JSON.parse(sessionStorage.getItem('nowmenu')).Id,
  					MultiSearch:q,
            isPage:false,
            StatisticType:'',
            from:'store-order'
          }
          this.$ajax.GetHotelOrderByPage(searchData).then(res=>{
            if(res.Success){
              cb(res.Data.PagedData);
            }
          })
        }else{
          cb([])
        }
      },
      handleSelect(row){
        this.searchKey=row.ContactName;
        this.showOrder(row.OrderSerialid);
      },
      getSaleMan(id){
        let name=''
        this.SalesmanList.forEach(val=>{
          if(val.Id==id){
            name=val.Name
          }
        })
        return name
      },
      getDays(index){
        return new Date(new Date(this.nowDate).getTime() + 3600 * 1000 * 24 * index).getDay();
      },
      getFormatDay(index){
        return new Date(new Date(this.nowDate).getTime() + 3600 * 1000 * 24 * index);
      },
      isToday(index){
        return this.$format('MM-dd',new Date())===this.$format('MM-dd',this.getFormatDay(index));
      },
      getStartEnd(arr){
      },
      getAlldate(start,end){
        let bd = new Date(start),be = new Date(end);
        let bdTime = bd.getTime(), beTime = be.getTime(),timeDiff = beTime - bdTime;
        let dArr = [];
        for(var i=0; i<= timeDiff; i+=86400000){
          var ds = this.$format('yyyy-MM-dd',new Date(bdTime+i));
          dArr.push(ds)
        }
        return dArr
      },
      showBtn(type){
        let now=this.$format('yyyy-MM-dd',new Date());
        let yestoday=this.$format('yyyy-MM-dd',new Date(new Date(this.nowDate).getTime() - 3600 * 1000 * 24));
        switch (type) {
          case 0:
            return this.selectedRoom.every((val)=>{return val.date>=now})
            break;
          case 1:
            return this.selectedRoom.some((val)=>{return val.date==now||val.date==yestoday})
            break;
          case -1:
            return this.selectedRoom.some((val)=>{return val.date<now})
            break;
          default:
            return true
        }
      },
      getRoomType(id){
        if(this.RoomCategoryIds.indexOf(id)>=0){
          this.RoomCategoryIds.splice(this.RoomCategoryIds.indexOf(id),1)
        }else{
          this.RoomCategoryIds.push(id)
        }
        this.checkallRoom=this.RoomCategoryIds.length===this.roomNumData.length;
      },
      checkAllRoom(val){
        this.RoomCategoryIds=[];
        if(val){
          this.RoomCategoryIds=this.roomNumData.map(item=>{
            return item.roomId
          })
          this.roomCheckData.forEach(item=>{
            item.ischeck=true;
          })
        }else{
          this.roomCheckData.forEach(item=>{
            item.ischeck=false;
          })
        }
      },
      // initRoom(){
      //   this.cur=1;
      //   let data={
      //     StartDate:this.$format('yyyy-MM-dd',new Date(this.nowDate)),
      //     Days:30,
      //     RoomCategoryIds:this.checkallRoom?[]:this.RoomCategoryIds
      //   }
      //   this.$ajax.getroomstatus(data).then(res=>{
      //     if(res.Success&&res.Data.RoomStatusList.length>0){
      //       this.roomRowData=[];
      //       this.orderData=[];
      //       this.allorderData=[];
      //       this.showCardList=[];
      //       this.selectedRoom=[];
      //       this.selectedCol=[];
      //       res.Data.OrderList.forEach(val=>{
      //         if(val.RoomNo){
      //           this.allorderData.push({
      //             roomNum:val.RoomNo,
      //             room:val.CategoryId,
      //             date:val.CheckInDate.split('T')[0],
      //             day:val.Days,
      //             type:val.OrderStatus,
      //             personName:val.CustomerName,
      //             NeedPayAmount:val.NeedPayAmount,
      //             orderSerialid:val.OrderSerialId,
      //             name:val.ChannelName,
      //             position:false,
      //             HotelOrderId:val.HotelOrderId,
      //             CheckInDate:val.CheckInDate,
      //             CheckOutDate:val.CheckOutDate
      //           })
      //         }
      //       })
      //       this.getShoworder();
      //       this.$nextTick(()=>{
      //         document.querySelectorAll('.orderDiv').forEach(val=>{val.style=''});
      //         this.getDivHeight(this.orderData,this.selectedCol);
      //         this.showroomRowFormatData.forEach(room=>{
      //           room.openRoom=true;
      //           room.roomList.forEach((val,index)=>{
      //             val.selected=false;
      //           })
      //         })
      //         this.$ajax.GetRoomInventorySimple(data).then(res=>{
      //           if(res.Success){
      //             this.ventorySimple=res.Data
      //           }
      //         })
      //         this.$ajax.GetHotelOrderCount({orgId:JSON.parse(sessionStorage.getItem('nowmenu')).Id}).then(res=>{
      //             if(res.Success){
      //               res.Data.forEach(val=>{
      //                 switch (val.SearchFlag) {
      //                   case 'assign':
      //                     this.orderCount.assign=val.Count;
      //                     break;
      //                   case 'checkin':
      //                     this.orderCount.checkin=val.Count;
      //                     break;
      //                   case 'checkout':
      //                     this.orderCount.checkout=val.Count;
      //                     break;
      //                   case 'in':
      //                     this.orderCount.in=val.Count;
      //                     break;
      //                   default:
      //                     return;
      //                 }
      //               })
      //             }
      //         })
      //       })
      //     }
      //   })
      // },
      getShoworder(){
        if(this.orderData.length>=this.allorderData.length)return;
        const datalength=this.fullLength*this.cur;
        const data=this.roomRowFormatData.slice(0,datalength).map(item=>{
          return item.roomName
        })
        this.orderData=this.allorderData.filter(item=>{
          return data.indexOf(item.roomNum)>=0
        })
        this.cur++;
      },
      initRoom(type){
        this.checkRoomShow=false;
        this.cur=1;
        let data={
          StartDate:this.$format('yyyy-MM-dd',new Date(this.nowDate)),
          Days:30,
          RoomCategoryIds:this.checkallRoom?[]:this.RoomCategoryIds
        }
        this.$ajax.getroomstatus(data).then(res=>{
          if(res.Success&&res.Data.RoomStatusList.length>0){
            this.loading=false;
            this.roomRowData=[];
            this.orderData=[];
            this.allorderData=[];
            this.showCardList=[];
            this.selectedRoom=[];
            this.selectedCol=[];
            res.Data.RoomStatusList.forEach(val=>{
              if(val.RoomStatusList.length>=30){
                this.roomRowData.push({
                  Id:val.RoomId,
                  roomName:val.RoomNo,
                  RoomCategoryShortName:val.RoomCategoryShortName,
                  roomId:val.RoomCategoryId,
                  IsDirty:val.IsDirty,
                  IsLock:val.IsLock,
                  LockMes:val.LockMes,
                  roomList:val.RoomStatusList
                })
              }
            })
            res.Data.OrderList.forEach(val=>{
              if(val.RoomNo){
                this.allorderData.push({
                  roomNum:val.RoomNo,
                  room:val.CategoryId,
                  date:val.CheckInDate.split('T')[0],
                  day:val.Days,
                  type:val.OrderStatus,
                  personName:val.CustomerName,
                  NeedPayAmount:val.NeedPayAmount,
                  orderSerialid:val.OrderSerialId,
                  name:val.ChannelName,
                  position:false,
                  HotelOrderId:val.HotelOrderId,
                  CheckInDate:val.CheckInDate,
                  CheckOutDate:val.CheckOutDate
                })
              }
            })
            this.allorderData=_.sortBy(this.allorderData, ['roomNum', 'date']);
            this.holidayData=res.Data.Holidays;
            this.roomRowFormatData=this.roomDataFormat(this.roomRowData,this.selectedCol);
            this.showroomRowFormatData=this.roomRowFormatData;
            this.getShoworder();
            this.$nextTick(()=>{
              document.querySelectorAll('.orderDiv').forEach(val=>{val.style=''});
              this.getDivHeight(this.orderData,this.selectedCol);
              this.$ajax.GetRoomInventorySimple(data).then(res=>{
                if(res.Success){
                  this.ventorySimple=res.Data
                }
              })
              this.$ajax.GetHotelOrderCount({orgId:JSON.parse(sessionStorage.getItem('nowmenu')).Id}).then(res=>{
                  if(res.Success){
                    res.Data.forEach(val=>{
                      switch (val.SearchFlag) {
                        case 'assign':
                          this.orderCount.assign=val.Count;
                          break;
                        case 'checkin':
                          this.orderCount.checkin=val.Count;
                          break;
                        case 'checkout':
                          this.orderCount.checkout=val.Count;
                          break;
                        case 'in':
                          this.orderCount.in=val.Count;
                          break;
                        default:
                          return;
                      }
                    })
                  }
              })
            })
          }else{
            if(this.nowDate!=this.$format('yyyy-MM-dd',new Date())){
              this.$message.error('当前时间无价格日历，请先设置价格日历!');
              this.nowDate=this.$format('yyyy-MM-dd',new Date());
              this.initRoom();
            }else{
              this.$message.error('当前门店无价格日历，请先设置价格日历!');
              this.$router.push({name:'store-room'});
            }
          }
        })
        this.$ajax.GetRoomCategoryList({hotelId:JSON.parse(sessionStorage.getItem('nowmenu')).Id}).then(res=>{
          if(res.Success&&res.Data){
            this.roomNumData=[];
            res.Data.forEach(val=>{
              this.roomNumData.push({
                roomName:val.Name,
                isopen:true,
                roomId:val.Id,
                roomData:val.RoomNos
              })
            })
            if(!this.roomCheckData||!type){
              this.checkallRoom=true;
              this.roomCheckData=this.roomNumData.map((item,index)=>{
                return {ischeck:true}
              })
            }
          }else{
            this.$message.error('当前门店无房型，请先添加房型并设置价格日历!');
            this.$router.push({name:'store-room'});
          }
        })
        return Promise.resolve();
      },
      toggleClass(room,date,list,Price,data){
        let roomName='';
        this.roomNumData.forEach(val=>{
          if(val.roomId===room.roomId){
            roomName=val.roomName;
          }
        })
        let index=_.findIndex(this.selectedRoom, function(o) { return o.date === date&&o.roomNum===room.roomName; });
        room.roomList[list].selected=!room.roomList[list].selected;
        if(index>=0){
          this.selectedRoom.splice(index,1);
        }else{
          this.selectedRoom.push({
            date:date,
            roomNum:room.roomName,
            roomId:room.roomId,
            roomName:roomName,
            PolicyName:data.PolicyName,
            PolicyId:data.PolicyId,
            Id:room.Id,
            Price:Price
          });
        }
        this.showCardList=_.sortBy(this.getCardList(this.selectedRoom), ['roomName', 'roomNum']);
      },
      getCardList(data){
        let newList=[];
        let obj = {};
        newList=data.reduce((cur,next) => {
            obj[next.roomNum] ? "" : obj[next.roomNum] = true && cur.push(next);
            return cur;
        },[])
        return newList
      },
      changeDate(date){
        const date1 = new Date(new Date().getTime() + 3600 * 1000 * 24 * 1);
        this.initRoom();
      },
      onscroll(e,position){
        let tabL=this.$el.querySelector(".calendar-header");
        let tabT=this.$el.querySelector(".calendar-leftHeader");
        tabT.scrollTop=position.scrollTop;
        tabL.scrollLeft=position.scrollLeft;
        if(tabT.scrollTop>document.documentElement.clientHeight){
          this.fullLength=parseInt(tabT.scrollTop/70);
        }
        let nowlen=this.orderData.length;
        let alllen=this.allorderData.length;
        let allcur=(this.cur-1)*this.fullHeight;
        let nowcur=allcur-position.scrollTop;
        if(nowcur<900&&nowlen<alllen){
          this.getShoworder();
          this.$nextTick(()=>{
            this.getDivHeight(this.orderData,this.selectedCol);
          })
        }
      },
      roomDataFormat(data,roomIds){
        if(!!data.length){
          data.forEach(room=>{
            room.openRoom=true;
            room.roomList.forEach((val,index)=>{
              val.roomDate=this.$format('yyyy-MM-dd',new Date(new Date(this.nowDate).getTime() + 3600 * 1000 * 24 * index));
              val.roomIn=!val.HotelOrderId?1:0;
              val.selected=false;
            })
          })
          let newData=[];
          let roomData=[];
          data.forEach(room=>{
            if(roomIds.indexOf(room.roomId)>=0){
              if(newData.some((val)=>{return val.roomId===room.roomId})){
                newData.forEach(val=>{
                  if(val.roomId===room.roomId){
                    val.roomList=val.roomList.concat(room.roomList);
                  }
                })
              }else{
                newData.push({
                  openRoom:false,
                  ...room
                })
              }
            }else{
              newData.push(room)
            }
          })
          let finData=[];
          newData.forEach(room=>{
            let newList=[];
            if(roomIds.indexOf(room.roomId)>=0){
              room.roomList.forEach((val)=>{
                if(newList.some((list)=>{return list.roomDate===val.roomDate})){
                  newList.forEach(list=>{
                    if(list.roomDate===val.roomDate){
                      if(!!val.PolicyId&&!room.IsLock){
                        list.roomNum+=val.roomIn
                      }
                    }
                  })
                }else{
                  newList.push({
                    roomDate:val.roomDate,
                    roomNum:1
                  })
                }
              })
            }else{
              newList=room.roomList;
            }
            finData.push({
              ...room,
              roomList:newList
            })
          })
          data=finData;
        }
        return data;
      },
      getDivHeight(data,roomIds){
        let today=this.nowDate;
        if(data.length>0){
          data.forEach(val=>{
            let sdate=val.date;
            let days=val.day;
            if(roomIds.indexOf(val.room)>=0){
              let room=val.room,
                  date=sdate,
                  div=this.$refs['order'+val.roomNum+date];
              !div?null:div[0].style.display='none';
            }else{
              if(days>30){
                days=30-this.getAlldate(today,sdate).length+1;
              }
              if(sdate<today){
                days=days-this.getAlldate(sdate,today).length+1;
                sdate=today;
              }
              let room=val.room;
              let date=sdate;
              let roomNum=val.roomNum;
              let td=this.$refs[room+date+roomNum];
              let div=this.$refs['order'+roomNum+val.date];
              let width=days>1?days*99+(days-1)*2:99;
              if(!!td&&!!td.length){
                let left=td[0].offsetLeft+1;
                let top=td[0].offsetTop+2;
                div[0].style.left=left+'px';
                div[0].style.top=top+'px';
                div[0].style.width=width+'px';
                div[0].style.display='block';
              }else{
                div[0].style.display='none';
              }
            }
          })
        }
      },
      changeTableCol(data){
        data.isopen=!data.isopen;
        let index=this.selectedCol.indexOf(data.roomId);
        if(index>=0){
          this.selectedCol.splice(index,1);
        }else{
          this.selectedCol.push(data.roomId);
          this.roomRowFormatData.forEach(val=>{
            if(val.roomId===data.roomId){
              val.openRoom=data.isopen;
            }
          })
        }
        this.roomRowFormatData=this.roomDataFormat(this.roomRowData,this.selectedCol);
        this.$nextTick(()=>{
          this.getDivHeight(this.orderData,this.selectedCol)
        })
      },
      continueDays(arr_days) {
        // 先排序，然后转时间戳
        let days = arr_days.sort().map((d, i) => {
          let dt = new Date(d)
          dt.setDate(dt.getDate() + 4 - i) // 处理为相同日期

          // 抹去 时 分 秒 毫秒
          dt.setHours(0)
          dt.setMinutes(0)
          dt.setSeconds(0)
          dt.setMilliseconds(0)

          return +dt
        })

        let ret = true

        days.forEach(d => {
          if (days[0] !== d) {
            ret = false
          }
        })

        return ret
      },
      roomIn(){
        let ret = false;
        this.showCardList.forEach((val)=>{
          val.dateList=[]
          this.selectedRoom.forEach((room)=>{
            if(val.roomNum===room.roomNum){
              val.dateList.push(room.date)
            }
          })
          val.dateList=val.dateList.sort();
          if(!val.dateList.some(val=>{return val.indexOf(this.$format('yyyy-MM-dd',new Date()))>=0})){
            ret=true;
          }
        })
        if(ret||!this.showCardList.every(val=>{return this.continueDays(val.dateList)})){
          this.$confirm('未来日期不可直接入住', {
            showConfirmButton:false,
            showCancelButton:false,
            callback:()=>{},
            type:'warning'
          })
          return;
        }
        this.clearRuleForm();
        this.dialogData=this.getDialogRoomData(_.sortBy(this.selectedRoom, ['roomNum', 'date']));
        this.dialogTitle='直接入住';
        this.OrderAction=2;
        this.showAddRoom();
      },
      getDialogRoomData(data){
        let finData=[];
        let obj={};
        data=data.reduce((newData,room)=>{
          if(obj[room.roomNum]){
            newData[room.roomNum].push(room);
          }else{
            obj[room.roomNum]=true;
            newData[room.roomNum]=[room];
          }
          return newData
        },{})
        let getdd=(date)=>{return this.$format('yyyy-MM-dd',new Date(new Date(date).getTime() - 3600 * 1000 * 24))};
        let getend=(date)=>{return this.$format('yyyy-MM-dd',new Date(new Date(date).getTime() + 3600 * 1000 * 24))};
        _.map(data,(val)=>{
          if(val.length>1){
            let time=[];
            let newVal=[];
            let price=0;
            val.reduce((arr,cur,index)=>{
              price+=cur.Price;
              if(time.length>0){
                if(time[time.length-1]===getdd(cur.date)){
                  time.push(cur.date);
                }else{
                  newVal.push({
                    roomName:cur.roomName,
                    roomNum:cur.roomNum,
                    roomId:cur.roomId,
                    Status:cur.Status,
                    Id:cur.Id,
                    AllAmount:price,
                    PolicyPriceAmount:price,
                    PolicyId:cur.PolicyId,
                    PolicyName:cur.PolicyName,
                    startDate:time[0]+' 12:00:00',
                    endDate:getend(time[time.length-1])+' 12:00:00',
                    Days: this.getAlldate(time[0]+' 12:00:00',getend(time[time.length-1])+' 12:00:00').length-1,
                  })
                  time=[cur.date]
                }
                if(val.length-1===index){
                  newVal.push({
                    roomName:cur.roomName,
                    roomNum:cur.roomNum,
                    roomId:cur.roomId,
                    Status:cur.Status,
                    Id:cur.Id,
                    AllAmount:price,
                    PolicyId:cur.PolicyId,
                    PolicyName:cur.PolicyName,
                    PolicyPriceAmount:price,
                    startDate:time[0]+' 12:00:00',
                    endDate:getend(time[time.length-1])+' 12:00:00',
                    Days: this.getAlldate(time[0]+' 12:00:00',getend(time[time.length-1])+' 12:00:00').length-1,
                  })
                }
              }else{
                time.push(cur.date);
              }
            },newVal)
            val=newVal;
          }else{
            val={
              roomName:val[0].roomName,
              roomNum:val[0].roomNum,
              roomId:val[0].roomId,
              AllAmount:val[0].Price,
              PolicyPriceAmount:val[0].Price,
              Status:val[0].Status,
              PolicyId:val[0].PolicyId,
              PolicyName:val[0].PolicyName,
              Id:val[0].Id,
              startDate:val[0].date+' 12:00:00',
              endDate:getend(val[0].date)+' 12:00:00',
              Days: this.getAlldate(val[0].date+' 12:00:00',getend(val[0].date)+' 12:00:00').length-1,
            }
          }
          finData=finData.concat(val);
        })
        let AllAmount=0;
        finData.forEach(room=>{
          AllAmount+=room.AllAmount
          let data={
            HotelOrderId:room.HotelOrderId||0,
            CheckInTime:room.startDate,
            CheckOutTime:room.endDate,
            RoomCategoryId:room.roomId,
            HotelId:JSON.parse(sessionStorage.getItem('nowmenu')).Id
          }
          room.roomData=[];
          this.$ajax.GetAvailableRooms(data).then(res=>{
            if(res.Success){
              room.roomData=res.Data;
            }
          })
          room.Roomers=[];
        })
        this.ruleForm.AllAmount=AllAmount;
        this.ruleForm.SellingPriceAmount=AllAmount;
        return finData;
      },
      roomBook(){
        this.clearRuleForm();
        this.dialogData=this.getDialogRoomData(_.sortBy(this.selectedRoom, ['roomNum', 'date']));
        this.dialogTitle='预定';
        this.OrderAction=1;
        this.showAddRoom();
      },
      roomFill(){
        this.clearRuleForm();
        this.dialogData=this.getDialogRoomData(_.sortBy(this.selectedRoom, ['roomNum', 'date']));
        this.dialogTitle='补录';
        this.OrderAction=1;
        this.showAddRoom();
      },
      getFromChannel(id){
        if(id==7||id==8){
          this.ChannelList.forEach(val=>{
            if(val.Code==id){
              this.ChannelChildList=val.Childs
            }
          })
        }else{
          this.ChannelChildList=[];
        }
      },
      getFromChannel1(id){
        this.ruleForm.TravelAgency='';
        if(id==7||id==8){
          this.ChannelList.forEach(val=>{
            if(val.Code==id){
              this.ChannelChildList=val.Childs
            }
          })
        }else{
          this.ChannelChildList=[];
        }
      },
      showAddRoom(){
        this.tableData=[];
        this.roomShow=true;
      },
      clearRuleForm(){
        this.ProductList=[];
        this.ruleForm={
          ContactName: '',
          ContactPhone: '',
          TravelAgency: '',
          SalesmanName: '',
          Remark:'',
          AllAmount:'',
          SellingPriceAmount:'',
          PaymentMode:3,
          FromChannel: !!this.ChannelList[0]?parseInt(this.ChannelList[0].Code):'',
          SalesmanId:0
        };
        !!this.$refs['ruleForm']?this.$refs['ruleForm'].resetFields():'';
      },
      getMroomData(m,nowcheck,index){
        m.roomNum='';
        m.Id='';
        m.roomData=[];
        let data={
          HotelOrderId:m.HotelOrderId||0,
          CheckInTime:m.startDate,
          CheckOutTime:m.endDate,
          RoomCategoryId:nowcheck,
          HotelId:JSON.parse(sessionStorage.getItem('nowmenu')).Id
        }
        this.$ajax.GetAvailableRooms(data).then(res=>{
          if(res.Success){
            m.roomData=res.Data;
            this.$set(this.dialogData,index,m)
          }
        })
        this.roomNumData.forEach((room)=>{
          if(room.roomId===m.roomId){
            m.roomName=room.roomName;
          }
        })
        this.getMroomPrcie(m)
      },
      getRoomId(m,val){
        m.roomData.forEach(value=>{
          if(value.RoomName==val){
            m.Id=value.RoomId
          }
        })
      },
      getendDate(m,index){
        m.endDate=this.$format('yyyy-MM-dd',new Date(new Date(m.startDate).getTime() + 3600 * 1000 * 24))+' 12:00:00'
        let data={
          HotelOrderId:m.HotelOrderId||0,
          CheckInTime:m.startDate,
          CheckOutTime:m.endDate,
          RoomCategoryId:m.roomId,
          HotelId:JSON.parse(sessionStorage.getItem('nowmenu')).Id
        }
        m.roomData=[];
        this.$ajax.GetAvailableRooms(data).then(res=>{
          if(res.Success){
            if(!res.Data.some(item=>{return item.RoomName===m.roomNum})){
              m.roomNum='';
            }
            m.roomData=res.Data;
            this.$set(this.dialogData,index,m)
          }
        })
        this.getMroomPrcie(m);
      },
      changeDays(val,data){
        let enddate=this.$format('yyyy-MM-dd',new Date(new Date(data.startDate).getTime() + 3600 * 1000 * 24 * val))+' 12:00:00';
        data.endDate=enddate;
        this.getMroomPrcie(data);
      },
      getMroomPrcie(m){
        if(!m.PolicyId)return;
        if(m.endDate< m.startDate){
          m.startDate=this.$format('yyyy-MM-dd',new Date(new Date(m.endDate).getTime() - 3600 * 1000 * 24))+' 12:00:00'
        }
        m.Days=this.getAlldate(m.startDate,m.endDate).length-1;
        let data={roomCategoryId:m.roomId,policyConfigId:m.PolicyId,rooms:1,date:m.startDate.split(' ')[0],days:this.getAlldate(m.startDate,m.endDate).length-1};
        this.$ajax.singlepolicyprice(data).then(res=>{
          if(res.Success){
            this.ruleForm.AllAmount+=res.Data-m.AllAmount;
            this.ruleForm.SellingPriceAmount+=res.Data-m.AllAmount;
            m.AllAmount=res.Data;
            m.PolicyPriceAmount=res.Data;
          }
        })
      },
      GetSingleProductByType(data){
        data.ProductId="";
        data.UnitPrice="";
        data.AllAmount=0;
        data.SellingPriceAmount=0;
        this.getAllAmount();
        this.$ajax.GetSingleProductByType({type:data.ProductType,hotelId:JSON.parse(sessionStorage.getItem('nowmenu')).Id}).then(res=>{
          if(res.Success){
            data.ProductNameList=res.Data;
          }
        })
      },
      getUnitPrice(data){
        data.UnitPrice='';
        data.ProductNameList.forEach(val=>{
          if(val.Id===data.ProductId){
            data.UnitPrice=val.UnitPrice;
            data.AllAmount=data.UnitPrice*data.Quantity;
            data.SellingPriceAmount=data.UnitPrice*data.Quantity;
            data.ProductName=val.Name;
            data.Unit=val.Unit;
          }
        })
        this.getAllAmount();
      },
      getAllAmount(){
        this.ruleForm.AllAmount=0;
        this.ruleForm.SellingPriceAmount=0;
        this.dialogData.forEach(val=>{
          this.ruleForm.AllAmount+=parseFloat(val.AllAmount);
          this.ruleForm.SellingPriceAmount+=parseFloat(val.PolicyPriceAmount);
        })
        this.ProductList.forEach(val=>{
          this.ruleForm.AllAmount+=parseFloat(val.AllAmount);
          this.ruleForm.SellingPriceAmount+=parseFloat(val.SellingPriceAmount);
        })
      },
      submitOrder(){
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            let data={
              ...this.ruleForm,
              OrderAction: this.OrderAction,
              HotelId: JSON.parse(sessionStorage.getItem('nowmenu')).Id,
              HotelName: JSON.parse(sessionStorage.getItem('nowmenu')).name,
              RoomList: [],
              ProductList: []
            }
            this.dialogData.forEach(val=>{
              data.RoomList.push({
                "Id":this.OrderAction===0?val.HotelOrderId:0,
                "RoomCategoryName": val.roomName,
                "RoomCategoryPolicyId": val.PolicyId,
                "HotelId": JSON.parse(sessionStorage.getItem('nowmenu')).Id,
                "HotelName": JSON.parse(sessionStorage.getItem('nowmenu')).name,
                "RoomCategoryId": val.roomId,
                "RoomId":!val.roomNum?0:val.Id,
                "RoomNo": val.roomNum,
                "CheckInDate": val.startDate,
                "CheckOutDate": val.endDate,
                "Days": this.getAlldate(val.startDate,val.endDate).length-1,
                PolicyPriceAmount:val.PolicyPriceAmount,
                Status:val.Status,
                "AllAmount": val.AllAmount,
                "Roomers": val.Roomers
              })
            })
            this.ProductList.forEach(val=>{
              data.ProductList.push({
                ...val
              })
            })
            if(this.OrderAction===0){
              data.OrderSerialid=this.ruleForm.OrderSerialid;
              data.Id=this.ruleForm.OrderId;
              this.$ajax.ChangeOrder(data).then(res=>{
                if(res.Success){
                  this.initRoom();
                  this.showOrder(res.Data);
                  this.roomShow=false;
                }
              })
            }else{
              this.$ajax.Orderplaceorder(data).then(res=>{
                if(res.Success){
                  this.initRoom();
                  if(!!this.tableData.length){
                    this.tableData.forEach((val,index)=>{
                      let datas=_.cloneDeep(val);
                      datas.OrderSerialid=res.Data;
                      this.$ajax.savecashierrecord(datas).then(res=>{
                        if(res.Success&&index===this.tableData.length-1){
                          this.showOrder(datas.OrderSerialid);
                        }
                      })
                    })
                  }else{
                    this.showOrder(res.Data);
                  }
                  this.roomShow=false;
                }
              })
            }
          }
        })
      },
      showOrder(id){
        this.orderSerialid=id;
        this.$ajax.getorderdetail({OrderSerialid:this.orderSerialid}).then(res=>{
          if(res.Success){
            this.orderInfoData=res.Data;
            this.orderInfo=true;
            this.tableShow=false;
            if(this.roomoutShow){
              this.roomoutShowBtn()
            }else if(this.roominShow){
              this.roominShowBtn()
            }
            else{
              this.roomoutShow=false;
              this.roominShow=false;
            }
          }
        })
      },
      editOrder(){
        this.dialogData=[];
        this.ruleForm={};
        this.ProductList=[];
        this.ruleForm=_.cloneDeep(this.orderInfoData);
        this.ruleForm.RoomList=this.ruleForm.HotelOrders;
        this.ProductList=this.ruleForm.SingleProductOrders;
        this.ruleForm.RoomList.forEach(val=>{
          this.dialogData.push({
            roomName:val.RoomCategoryName,
            "PolicyName": val.RoomCategoryName,
            "PolicyId": val.RoomCategoryPolicyId,
            "HotelId": JSON.parse(sessionStorage.getItem('nowmenu')).Id,
            "HotelName": JSON.parse(sessionStorage.getItem('nowmenu')).name,
            "roomId": val.RoomCategoryId,
            "Id":val.RoomId,
            "HotelOrderId":val.Id,
            "roomNum": val.RoomNo,
            "startDate": val.CheckInDate,
            "endDate": val.CheckOutDate,
            "Days": this.getAlldate(val.CheckInDate,val.CheckOutDate).length-1,
            "AllAmount": val.AllAmount,
            "PolicyPriceAmount": val.PolicyPriceAmount,
            Status:val.Status,
            "Roomers": val.Roomers
          })
        })
        delete this.ruleForm.HotelOrders;
        delete this.ruleForm.SingleProductOrders;
        this.dialogTitle='修改订单';
        this.OrderAction=0;
        this.ProductList.forEach((val,index)=>{
          this.$ajax.GetSingleProductByType({type:val.ProductType,hotelId:JSON.parse(sessionStorage.getItem('nowmenu')).Id}).then(res=>{
            if(res.Success){
              this.$set(this.ProductList[index],'ProductNameList',res.Data)
            }
          })
        })
        this.getFromChannel(this.ruleForm.FromChannel);
        this.getAllAmount();
        this.dialogData.forEach((val,index)=>{
          let data={
            HotelOrderId:val.HotelOrderId||0,
            CheckInTime:val.startDate,
            CheckOutTime:val.endDate,
            RoomCategoryId:val.roomId,
            HotelId:val.HotelId
          }
          val.roomData=[];
          this.$ajax.GetAvailableRooms(data).then(res=>{
            if(res.Success){
              val.roomData=res.Data;
              this.$set(this.dialogData,index,val)
            }
          })
          return val;
        })
        this.$nextTick(()=>{
          this.showAddRoom();
        })
      },
      deleteOrderShowBtn(){
        this.priceForm={
          Amount:'',
          Remark:'',
          CashierChannel:'',
          CashierItem:4,
          OrderSerialid:this.orderSerialid
        }
        this.deleteOrderShow=true;
      },
      deleteOrder(formName){
        if(!this.CancelReason){
          this.$message.error('请选择取消原因');
          return
        }
        let data={
          orderSerialid:this.orderSerialid,
          CancelReason:this.CancelReason
        }
        if(this.radio===0){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$ajax.savecashierrecord(this.priceForm).then(res=>{
                if(res.Success){
                  this.$ajax.CancelOrder(data).then(res=>{
                    if(res.Success){
                      this.$message({
                        type: 'success',
                        message: '已取消!'
                      });
                      this.deleteOrderShow=false;
                      this.orderInfo=false;
                      this.initRoom();
                    }
                  })
                }
              })
            }else {
              return false;
            }
          });
        }else{
          this.$ajax.CancelOrder(data).then(res=>{
            if(res.Success){
              this.$message({
                type: 'success',
                message: '已取消!'
              });
              this.deleteOrderShow=false;
              this.orderInfo=false;
              this.initRoom();
            }
          })
        }
      },
      deleteRoomPro(data,index){
        this[data].splice(index,1);
        this.getAllAmount();
      },
      getpriceData(){
        if(!this.tableShow){
          this.tableData=[];
          this.$ajax.getcashierrecords({orderSerialid:this.orderSerialid}).then(res=>{
            if(res.Success){
              this.tableData=res.Data;
              this.tableShow=true;
            }
          })
        }else{
          this.tableShow=false;
        }
      },
      addPriceInfo(command){
        this.priceTitle=command.name;
        this.priceForm={
          Amount:'',
          Remark:'',
          CashierChannel:this.priceTitle=="收款"?4:this.priceTitle=="收押金"?1:'',
          CashierItem:command.type,
          OrderSerialid:this.orderSerialid
        }
        this.priceShow=true;
        this.$nextTick(()=>{
          this.$refs.priceFormAmount.focus();
        })
      },
      resetForm(formName) {
        if(!this.$refs[formName]){return};
        this.$refs[formName].resetFields();
      },
      addPriceRoomIn(formName){
        this.tableData.push(this.priceForm);
        this.priceShow=false;
        this.tableShow=true;
      },
      addPriceBtn(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$ajax.savecashierrecord(this.priceForm).then(res=>{
              if(res.Success){
                this.$message.success('收款成功!');
                this.$refs[formName].resetFields();
                this.priceShow=false;
                this.tableShow=false;
                this.showOrder(this.orderSerialid);
                this.getpriceData();
              }
            })
          } else {
            return false;
          }
        });
      },
      deletePriceInfo(data){
        this.$confirm(`确认删除该${this.CashierItem[data.CashierItem]}记录？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$ajax.deleteordercashierrecord({Id:data.Id,Item:data.CashierItem}).then(res=>{
            if(res.Success){
              this.$message({
                type: 'success',
                message: '已删除!'
              });
              this.showOrder(this.orderSerialid);
              this.tableShow=false;
              this.getpriceData();
            }
          })
        }).catch(() => {
        });
      },
      roomoutShowBtn(){
        this.roomoutData.HotelOrderIds=[];
        this.orderInfoData.HotelOrders.forEach(val=>{
          val.IsCheckOut=true;
          if(val.Status===1){
            this.roomoutData.HotelOrderIds.push(val.Id)
          }
        })
        this.roomoutData.Remark=this.orderInfoData.Remark;
        this.roomoutShow=true;
      },
      getroomOutData(m){
        if(this.roomoutData.HotelOrderIds.indexOf(m.Id)>=0){
          this.roomoutData.HotelOrderIds.splice(this.roomoutData.HotelOrderIds.indexOf(m.Id),1)
        }else{
          this.roomoutData.HotelOrderIds.push(m.Id)
        }
      },
      roomoutBefore(){
        if(!this.roomoutData.HotelOrderIds.length){
          this.$message.error('请选择需要退房的房间!');
          return;
        }
        this.roomoutpriceData={
          Amount:Math.abs(this.orderInfoData.RestAmount),
          Remark:'',
          CashierChannel:'',
          CashierItem:'',
          OrderSerialid:this.orderSerialid
        }
        if(this.orderInfoData.RestAmount>0){
          this.roomoutpriceTitle='收款';
          this.roomoutpriceData.CashierItem=1;
        }
        if(this.orderInfoData.RestAmount<0){
          this.roomoutpriceTitle='退款';
          this.roomoutpriceData.CashierItem=4;
        }
        this.$refs.roomoutprice.toggleDiolag()
      },
      roomoutTrue(){
        if(!this.roomoutData.HotelOrderIds.length){
          this.$message.error('请选择需要退房的房间!');
          return;
        }
        let data={
          OrderSerialid:this.orderSerialid,
          HotelOrderIds:this.roomoutData.HotelOrderIds,
          Remark:this.roomoutData.Remark
        }
        this.$ajax.CheckOutOrder(data).then(res=>{
          if(res.Success){
            this.$message.success('退房成功!');
            this.roomoutShow=false;
            this.showOrder(this.orderSerialid);
            this.initRoom();
          }
        })
      },
      roominShowBtn(){
        if(!this.orderInfoData.HotelOrders.some(val=>{return val.Status==0&&val.CheckInDate.split('T')[0]<=this.$format('yyyy-MM-dd',new Date())})){
          this.$message.error('只有入离时间包含今天的房间才可入住!');
          return;
        }
        if(this.orderInfoData.HotelOrders.every(val=>{return !val.RoomNo})){
          this.$message.error('请先分配房间!');
          return;
        }
        this.roominData=[];
        this.orderInfoData.HotelOrders.forEach(val=>{
          val.IsCheckIn=true;
          if(val.Status===0){
            this.roominData.push(val.Id)
          }
        })
        this.isPrint=false;
        this.roominShow=true;
      },
      getroomInData(id){
        if(this.roominData.indexOf(id)>=0){
          this.roominData.splice(this.roominData.indexOf(id),1)
        }else{
          this.roominData.push(id)
        }
      },
      roominTrue(){
        let RoomList=[];
        this.orderInfoData.HotelOrders.forEach(val=>{
          if(this.roominData.indexOf(val.Id)>=0){
            RoomList.push(val)
          }
        })
        let data=_.cloneDeep(this.orderInfoData);
        data.ProductList=data.SingleProductOrders;
        data.RoomList=RoomList;
        data.HotelId=JSON.parse(sessionStorage.getItem('nowmenu')).Id;
        data.HotelName=JSON.parse(sessionStorage.getItem('nowmenu')).name;
        data.Id=data.OrderId;
        delete data.SingleProductOrders;
        delete data.HotelOrders;
        this.$ajax.CheckInOrder(data).then(res=>{
          if(res.Success){
            this.$message.success('入住成功!');
            this.roominShow=false;
            this.showOrder(this.orderSerialid);
            if(this.isPrint){
              this.printOrder(this.orderSerialid);
            }
            this.initRoom();
          }
        })
      },
      GetHotelOrderByPage(type,title){
        if(!this.orderCount[type])return;
        let data={
          StatisticType:type,
          OrgId:JSON.parse(sessionStorage.getItem('nowmenu')).Id,
					MultiSearch:'',
          IsPage:false
        }
        this.$ajax.GetHotelOrderByPage(data).then(res=>{
          if(res.Success){
            this.HotelOrderData=res.Data.PagedData;
            this.HotelOrderTitle=title;
            this.HotelOrderShow=true;
          }
        })
      },
      contentClick(m){
        this.dirtyData={
          roomId:m.Id,
          IsDirty:!m.IsDirty
        };
        this.lockData={
          roomId:m.Id,
          IsLock:!m.IsLock,
          Remark:''
        };
        this.roomId=m.Id;
        this.dirtyName=m.IsDirty?'净':'脏';
        this.lockName=m.IsLock?'解锁':'锁房';
      },
      changeDirty(){
        this.$ajax.SetRoomDC(this.dirtyData).then(res=>{
          if(res.Success){
            this.$message.success(`已置为${this.dirtyName}房!`);
            this.initRoom();
          }
        })
      },
      changeLockShow(){
        if(!this.lockData.IsLock){
          this.$ajax.UnlockRoom({roomId:this.lockData.roomId}).then(res=>{
            if(res.Success){
              this.$message.success('解锁成功!');
              this.initRoom();
            }
          })
        }else{
          !!this.$refs['lockForm']?this.$refs['lockForm'].resetFields():'';
          this.lockShow=true;
        }
      },
      changeLock(){
        this.$refs['lockForm'].validate((valid) => {
          if (valid) {
            this.$ajax.LockRoom(this.lockData).then(res=>{
              if(res.Success){
                this.$message.success('锁房成功!');
                this.lockShow=false;
                this.initRoom();
              }
            })
          } else {
            return false;
          }
        });
      },
      setRoom(id){
        this.orderSerialid=id;
        this.$ajax.GetOrderForSetRoom({orderSerialId:id}).then(res=>{
          if(res.Success){
            this.setRoomData=res.Data.map(val=>{
              val.roomType=0;
              val.checkList=[];
              return val;
            })
            this.setcheck(0);
            this.setRoomShow=true;
          }
        })
      },
      setcheck(type){
        this.setRoomData.forEach(val=>{
          val.checkList=[];
          val.RoomList.forEach(item=>{
            switch (type){
              case 1:
              if(item.HotelOrderId>0&&item.IsDirty){
                val.checkList.push(item.RoomId)
              }
              break;
              case 2:
              if(item.HotelOrderId>0&&!item.IsDirty){
                val.checkList.push(item.RoomId)
              }
              break;
              default:
              if(item.HotelOrderId>0){
                val.checkList.push(item.RoomId)
              }
              break;
            }
          })
        })
      },
      getcheckList(val,count){
        if(val.length>count){
          val=val.splice(count,1);
        }
      },
      OrderSetRoom(){
        let data={
          OrderSerialId:this.orderSerialid,
          RoomIds:[]
        }
        this.setRoomData.forEach(val=>{
          data.RoomIds.push(...val.checkList);
        })
        this.$ajax.OrderSetRoom(data).then(res=>{
          if(res.Success){
            this.$message.success('分房成功!');
            this.setRoomShow=false;
            this.HotelOrderShow=false;
            this.initRoom();
          }
        })
      },
      printOrder(id){
        window.open(`/#/vip-cards?id=${id}`)
      },
      getCash(id){
        let name='';
        this.CashierChannelList.forEach(val=>{
          if(val.Code==id){
            name=val.Name
          }
        })
        return name
      },
      querySearchAsync(queryString, cb) {
        if(!queryString){
          cb([]);
          return;
        }
        this.$ajax.QueryMember({nameOrMobile:queryString}).then(res=>{
          if(res.Success){
            let data=res.Data.map(item=>{return {value:item.Value,Phone:item.Key}})
            cb(data);
          }
        })
      },
      SendSMS(){
        !!this.$refs['SMSForm']?this.$refs['SMSForm'].resetFields():'';
        this.$ajax.GetCheckInNoticeSMS({orderSerialId:this.orderInfoData.OrderSerialid}).then(res=>{
          if(res.Success){
            this.SMSData={
              Content:res.Data,
              Mobiles:this.orderInfoData.ContactPhone,
            }
            this.SMSShow=true;
          }
        })
      },
      SendSMTrue(){
        this.$refs['SMSForm'].validate((valid) => {
          if (valid) {
            let data={
              Mobiles:[this.SMSData.Mobiles],
              Content:this.SMSData.Content
            }
            this.$ajax.SendSMS(data).then(res=>{
              if(res.Success){
                this.$message.success('发送成功!');
                this.SMSShow=false;
              }
            })
          } else {
            return false;
          }
        });
      },
      addRoom(){
        let data={...this.dialogData[this.dialogData.length-1]};
        let roomIndex=data.roomData.findIndex(item=>{return item.RoomId===data.Id});
        data.roomNum=data.roomData[roomIndex+1]?data.roomData[roomIndex+1].RoomName:data.roomData[roomIndex].RoomName;
        data.Id=data.roomData[roomIndex+1]?data.roomData[roomIndex+1].RoomId:data.roomData[roomIndex].RoomId;
        data.HotelOrderId=0;
        this.dialogData.push(data);
        this.getAllAmount();
      },
      dragOrder(event,data){
        console.log(data)
        if(data.type!==0){
          event.dataTransfer.dropEffect='null';
          event.dataTransfer.effectAllowed='none';
          this.dropData='';
        }else{
          event.dataTransfer.dropEffect='move';
          this.dropData=data;
        }
      },
      dragStart(event){
        console.log(event)
      },
      dragIn(event){

      },
      allowDrop(event) {
        event.preventDefault();
      },
      dropLeave(event){

      },
      dropOrder(event,pdata,cdata){
        if(!this.dropData||pdata.IsLock)return;
        const newData=JSON.parse(JSON.stringify(this.dropData));
        const endDate=this.$format('yyyy-MM-dd',new Date(new Date(cdata.roomDate).getTime() + 3600 * 1000 * 24 * (this.dropData.day-1)));
        const oldOrder=`order${this.dropData.roomNum}${this.dropData.date}`
        const allDate=this.getAlldate(cdata.roomDate,endDate);
        if(allDate.some(item=>{
          return pdata.roomList.some(val=>{
            if(val.roomDate===item){
              return !!val.HotelOrderId
            }
          })
        })){
          this.$message.info('当前日期已有订单无法调房！');
        }else{
          this.$confirm(`确认将房间调到${cdata.roomDate}  ${pdata.RoomCategoryShortName}${this.dropData.roomNum}？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            const CheckOutDate=this.$format('yyyy-MM-dd',new Date(new Date(cdata.roomDate).getTime() + 3600 * 1000 * 24* this.dropData.day));
            const datas={
              HotelOrderId:this.dropData.HotelOrderId,
              CheckInDate:cdata.roomDate,
              CheckOutDate:CheckOutDate,
              RoomId:pdata.Id,
              RoomCategoryPolicyId:cdata.PolicyId
            }
            this.$ajax.ChangeHotelOrder(datas).then(res=>{
              if(res.Success){
                this.loading=true;
                this.initRoom().then(res=>{
                  this.$message.success('调房成功！');
                })
              }
            })
          }).catch(() => {
          });
        }
      },
      orderMoveEnd(e){
      }
    },
    watch: {
      '$route' (to, from) {
        if(this.loading)return;
        this.loading=true;
        this.initRoom();
      }
    },
    created(){
      // window.open(window.origin+'/#/vip-cards')
    },
    mounted(){
      this.loading=true;
      this.initRoom().then(res=>{
        this.$ajax.GetUserListByOrgId({orgId:23}).then(res=>{
          if(res.Success){
            this.SalesmanList=res.Data;
          }
        })
        this.$ajax.Channels().then(res=>{
          if(res.Success){
            this.ChannelList=res.Data;
          }
        })
        this.$ajax.PayTypes().then(res=>{
          if(res.Success){
            this.CashierChannelList=res.Data;
          }
        })
      });
    }
  }
</script>
